<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Select 选择器</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.js"></script>
	<script src="../static/js/icons_antd.js"></script>
</head>
<style>
.ant-space-item, h2{
	margin-left: 20px;
}
</style>
<body>

<div id="app">
	<a-divider class="a-divi" orientation="left">基本使用</a-divider><!-- =============================================================== -->
	<p class="desc">基本使用。</p>
	<h2>use a-select-option</h2>
	<a-space>
		<a-select ref="select" v-model:value="value1_1" style="width: 120px" @focus="focus1" @change="handleChange1">
			<a-select-option value="jack">Jack</a-select-option>
			<a-select-option value="lucy">Lucy</a-select-option>
			<a-select-option value="disabled" disabled>Disabled</a-select-option>
			<a-select-option value="Yiminghe">yiminghe</a-select-option>
		</a-select>
		<a-select v-model:value="value1_2" style="width: 120px" disabled>
			<a-select-option value="lucy">Lucy</a-select-option>
		</a-select>
		<a-select v-model:value="value1_3" style="width: 120px" loading>
			<a-select-option value="lucy">Lucy</a-select-option>
		</a-select>
	</a-space>
	<h2 style="margin-top: 10px">use options (recommend推荐)</h2>
	<a-space>
		<a-select v-model:value="value1_1" style="width: 120px" :options="options1_1" ref="select" @focus="focus1" @change="handleChange1"></a-select>
		<a-select v-model:value="value1_2" style="width: 120px" :options="options1_2" disabled></a-select>
		<a-select v-model:value="value1_3" style="width: 120px" :options="options1_3" loading></a-select>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">标签</a-divider><!-- =============================================================== -->
	<p class="desc">tags select，随意输入的内容（scroll the menu）</p>
	<a-space>
		<a-select v-model:value="value2_1" mode="tags" style="width: 800px" placeholder="Tags Mode" :options="options2_1" @change="handleChange1"></a-select>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">自动分词</a-divider><!-- =============================================================== -->
	<p class="desc">试下复制 张三,李四 或 王五，马六 到输入框里。只在 tags 和 multiple 模式下可用。</p>
	<a-space>
		<a-select v-model:value="value3_1" mode="tags" style="width: 800px" placeholder="自动分词" :options="options1_1" @change="handleChange1" :token-separators="[',','，']"></a-select>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">多选</a-divider><!-- =============================================================== -->
	<p class="desc">多选，从已有条目中选择（scroll the menu）</p>
	<a-space>
		<a-select v-model:value="value4_1" mode="multiple" style="width: 800px" placeholder="多选" :options="options2_1" @change="handleChange1"></a-select>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">分组</a-divider><!-- =============================================================== -->
	<p class="desc">用 OptGroup 或 options.options 进行选项分组。</p>
	<a-space>
		<a-select v-model:value="value5_1" style="width: 200px" @change="handleChange1">
			<a-select-opt-group>
				<template #label>
					<span>
						<user-outlined class="ant-icon"></user-outlined>
						Manager
					</span>
				</template>
				<a-select-option value="jack">Jack</a-select-option>
				<a-select-option value="lucy">Lucy</a-select-option>
			</a-select-opt-group>
			<a-select-opt-group label="Engineer">
				<a-select-option value="Yiminghe">yiminghe</a-select-option>
				<a-select-option value="Yiminghe1">yiminghe1</a-select-option>
			</a-select-opt-group>
		</a-select>
		<a-select v-model:value="value5_2" :options="options5_2" style="width: 200px" @change="handleChange1"></a-select>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">带搜索框</a-divider><!-- =============================================================== -->
	<p class="desc">展开后可对选项进行搜索。</p>
	<a-space>
		<a-select v-model:value="value6_1" show-search placeholder="Select a person" style="width: 200px" :options="options1_1"
			:filter-option="filterOption6" @focus="handleFocus6" @blur="handleBlur6" @change="handleChange1"></a-select>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">后缀图标</a-divider><!-- =============================================================== -->
	<p class="desc">基本使用。</p>
	<a-space>
		<a-select v-model:value="value7_1" style="width: 120px" :options="options1_1" @change="handleChange1">
			<template #suffixIcon>
				<smile-outlined class="ant-icon"></smile-outlined>
			</template>
		</a-select>
		<a-select v-model:value="value7_2" style="width: 120px" disabled :options="options1_1">
			<template #suffixIcon>
				<meh-outlined class="ant-icon"></meh-outlined>
			</template>
		</a-select>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">扩展菜单</a-divider><!-- =============================================================== -->
	<p class="desc">使用 dropdownRender 对下拉菜单进行自由扩展。【有问题：因为不知道v-nodes标签的使用，这里不能显示待选项。】</p>
	<a-select v-model:value="value8_1" placeholder="custom dropdown render" style="width: 300px;margin-left: 20px;" :options="items8.map(item => ({ value: item }))">
		<template #dropdownRender="{ menuNode, props }">
			{{showData(menuNode, props)}}
			<v-nodes :vnodes="menuNode"></v-nodes>
			<a-divider style="margin: 4px 0"></a-divider>
			<a-space style="padding: 4px 8px">
				<a-input ref="inputRef" v-model:value="name8" placeholder="Please enter item"></a-input>
				<a-button type="text" @click="addItem8">
					<template #icon>
						<plus-outlined class="ant-icon"></plus-outlined>
					</template>
					Add item
				</a-button>
			</a-space>
		</template>
	</a-select>
	
	<a-divider class="a-divi" orientation="left">大数据</a-divider><!-- =============================================================== -->
	<p class="desc">Select 使用了虚拟滚动技术，因而获得了比 1.x 更好的性能</p>
	<h2>{{ options9_1.length }} Items</h2>
	<a-select v-model:value="value9_1" mode="multiple" style="width: 500px;margin-left: 20px;" placeholder="Please select" :options="options9_1"></a-select>
	
	<a-divider class="a-divi" orientation="left">弹出位置</a-divider><!-- =============================================================== -->
	<p class="desc">可以通过 placement 手动指定弹出的位置。</p>
	<a-space>
		<a-radio-group v-model:value="placement10">
			<a-radio-button value="topLeft">topLeft</a-radio-button>
			<a-radio-button value="topRight">topRight</a-radio-button>
			<a-radio-button value="bottomLeft">bottomLeft</a-radio-button>
			<a-radio-button value="bottomRight">bottomRight</a-radio-button>
		</a-radio-group>
		<a-select v-model:value="value10_1" style="width: 120px" :dropdown-match-select-width="false" :placement="placement10">
			<a-select-option value="HangZhou">HangZhou #310000</a-select-option>
			<a-select-option value="NingBo">NingBo #315000</a-select-option>
			<a-select-option value="WenZhou">WenZhou #325000</a-select-option>
		</a-select>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">三种大小</a-divider><!-- =============================================================== -->
	<p class="desc">三种大小的选择框，当 size 分别为 large 和 small 时，输入框高度为 40px 和 24px ，默认高度为 32px。</p>
	<a-space direction="vertical">
		<a-radio-group v-model:value="size11">
			<a-radio-button value="large">Large</a-radio-button>
			<a-radio-button value="middle">Middle</a-radio-button>
			<a-radio-button value="small">Small</a-radio-button>
		</a-radio-group>
		<a-select v-model:value="value11_1" :size="size11" :options="options2_1" style="width: 200px" @popup-scroll="popupScroll11"></a-select>
		<a-select v-model:value="value11_2" :size="size11" :options="options2_1" style="width: 200px" mode="multiple"></a-select>
		<a-select v-model:value="value11_3" :size="size11" :options="options2_1" style="width: 200px" mode="tags"></a-select>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">最多显示多少个选项及选项最大长度</a-divider><!-- =============================================================== -->
	<p class="desc">设置一个数字，超过后自动折叠。</p>
	<p class="desc">maxTagCount 也可以设置成响应式，但响应式对性能有所消耗，不推荐在大表单场景下使用。</p>
	<a-space direction="vertical" style="width: 500px">
		<a-space>
			<a-button type="primary" @click="maxTagCount++">maxTagCount++</a-button>
			<a-button type="primary" @click="maxTagCount--">maxTagCount--</a-button>
		</a-space>
		<h2>maxTagCount: {{ maxTagCount }}</h2>
		<a-select v-model:value="value12_1" mode="multiple" style="width: 100%" :max-tag-count="maxTagCount" :options="options12">
			<template #maxTagPlaceholder="omittedValues">
				<span style="color: red">+ {{ omittedValues.length }} ...</span>
			</template>
		</a-select>
		<a-divider></a-divider>
		
		<h2>maxTagCount: 响应式</h2>
		<a-select v-model:value="value12_1" mode="multiple" style="width: 100%" max-tag-count="responsive" :options="options12"></a-select>
		<a-divider></a-divider>
		
		<a-space>
			<a-button type="primary" @click="maxTagTextLength++">maxTagTextLength++</a-button>
			<a-button type="primary" @click="maxTagTextLength--">maxTagTextLength--</a-button>
		</a-space>
		<h2>maxTagTextLength: {{ maxTagTextLength }}</h2>
		<a-select v-model:value="value12_1" mode="multiple" style="width: 100%" :max-tag-text-length="maxTagTextLength" :options="options12"></a-select>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">获得选项的文本</a-divider><!-- =============================================================== -->
	<p class="desc">默认情况下 onChange 里只能拿到 value，如果需要拿到选中的节点文本 label，可以使用 labelInValue 属性。</p>
	<p class="desc">选中项的 label 会被包装到 value 中传递给 onChange 等函数，此时 value 是一个对象。</p>
	<p class="desc">个人觉得这个labelInValue基本没什么用，因为onChange的第二个参数option里面直接就有label</p>
	<a-select v-model:value="value13_1" label-in-value style="width: 120px;margin-left: 20px;" :options="options1_1" @change="handleChange1"></a-select>
	
	<a-divider class="a-divi" orientation="left">联动</a-divider><!-- =============================================================== -->
	<p class="desc">省市联动是典型的例子。 推荐使用 Cascader 组件。</p>
	<a-space>
		<a-select v-model:value="value14_1" style="width: 120px" :options="provinceData.map(pro => ({ value: pro }))"></a-select>
		<a-select v-model:value="value14_2" style="width: 120px" :options="cities.map(city => ({ value: city }))"></a-select>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">搜索框</a-divider><!-- =============================================================== -->
	<p class="desc">搜索和远程数据结合。</p>
	<a-select v-model:value="value15_1" show-search placeholder="input search text" style="width: 200px;margin-left: 20px;"
		:default-active-first-option="false" :show-arrow="false" :filter-option="false" :not-found-content="null"
		:options="options15_1" @search="handleSearch15" @change="handleChange1"></a-select>
	
	<a-divider class="a-divi" orientation="left">搜索用户</a-divider><!-- =============================================================== -->
	<p class="desc">一个带有远程搜索，节流控制，请求时序控制，加载状态的多选示例。</p>
	<a-select v-model:value="value16_1" mode="multiple" label-in-value placeholder="Select users" style="width: 800px;margin-left: 20px;"
		:filter-option="false" :not-found-content="null" :options="options16_1" @search="handleSearch16" @change="handleChange1"></a-select>
	
	<a-divider class="a-divi" orientation="left">隐藏已选择选项</a-divider><!-- =============================================================== -->
	<p class="desc">隐藏下拉列表中已选择的选项。</p>
	<a-select v-model:value="value17_1" mode="multiple" :options="options17_1" style="width: 800px;margin-left: 20px;"></a-select>
	
	<a-divider class="a-divi" orientation="left">定制回填内容</a-divider><!-- =============================================================== -->
	<p class="desc">使用 optionLabelProp 指定回填到选择框的 Option 属性。</p>
	<p class="desc">或者使用 tagRender 插槽自定义渲染节点</p>
	<a-space direction="vertical" style="width: 500px">
		<span>use a-select-option</span>
		<a-select v-model:value="value18_1" mode="multiple" style="width: 100%" placeholder="select one country"
			option-label-prop="children">
			<a-select-option value="china" label="China">
				<span role="img" aria-label="China">🇨🇳</span>&nbsp;&nbsp;China (中国)
			</a-select-option>
			<a-select-option value="usa" label="USA">
				<span role="img" aria-label="USA">🇺🇸</span>&nbsp;&nbsp;USA (美国)
			</a-select-option>
			<a-select-option value="japan" label="Japan">
				<span role="img" aria-label="Japan">🇯🇵</span>&nbsp;&nbsp;Japan (日本)
			</a-select-option>
			<a-select-option value="korea" label="Korea">
				<span role="img" aria-label="Korea">🇰🇷</span>&nbsp;&nbsp;Korea (韩国)
			</a-select-option>
		</a-select>
	
		<span>Note: v-slot:option support from v2.2.5</span>
		<a-select v-model:value="value18_1" mode="multiple" style="width: 100%" placeholder="select one country" option-label-prop="label" :options="options18">
			<template #option="{ value: val, label, icon }">
				<span role="img" :aria-label="val">{{ icon }}</span> &nbsp;&nbsp;{{ label }}
			</template>
		</a-select>
	
		<span>Note: v-slot:tagRender support from v3.0</span>
		<a-select v-model:value="value18_1" mode="multiple" style="width: 100%" placeholder="select one country" :options="options18">
			<template #option="{ value: val, label, icon }">
				<span role="img" :aria-label="val">{{ icon }}</span> &nbsp;&nbsp;{{ label }}
			</template>
			<template #tagRender="{ value: val, label, closable, onClose, option }">
				<a-tag :closable="closable" style="margin-right: 3px" @close="onClose">
					{{ label }}&nbsp;&nbsp;
					<span role="img" :aria-label="val">{{ option.icon }}</span>
				</a-tag>
			</template>
		</a-select>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">自定义 label、value、options 字段</a-divider><!-- =============================================================== -->
	<p class="desc">方便数据结构转换。</p>
	<p class="desc">仅支持 options 传递，不支持 a-select-option 构造节点。</p>
	<a-select ref="select" v-model:value="value19_1" style="width: 120px;margin-left: 20px;" :options="options19"
		:field-names="{ label: 'name', value: 'id', options: 'children' }" @focus="focus1" @change="handleChange1"></a-select>
	
	<a-divider class="a-divi" orientation="left">自定义状态</a-divider><!-- =============================================================== -->
	<p class="desc">使用 status 为 DatePicker 添加状态，可选 error 或者 warning。</p>
	<a-space direction="vertical" style="width: 500px">
		<a-select status="error" style="width: 100%" :options="options1_1"></a-select>
		<a-select status="warning" style="width: 100%" :options="options1_1"></a-select>
	</a-space>
	
	
	
</div>
<div class="h100"></div>

</body>
<script>
const Main = {
data() {
	return {
		value1_1: 'lucy',
		value1_2: 'lucy',
		value1_3: 'lucy',
		options1_1: [
			{value: 'jack',label: '杰克',},
			{value: 'lucy',label: '露西',},
			{value: 'disabled',label: 'Disabled',disabled: true,},
			{value: 'yiminghe',label: 'Yiminghe',},
		],
		options1_2: [
			{value: 'lucy',label: 'Lucy',},
		],
		options1_3: [
			{value: 'lucy',label: 'Lucy',},
		],
		
		value3_1: [],
		
		value4_1: ['a1', 'b2'],
		
		value5_1: ['lucy'],
		value5_2: ['lucy'],
		options5_2: [
			{label: 'Manager',options: [
					{value: 'jack',label: 'Jack',},
					{value: 'lucy',label: 'Lucy',},
				],
			},
			{label: 'Engineer',options: [
					{value: 'yiminghe',label: 'Yiminghe',},
				],
			}
		],
		
		value6_1: '',
		
		value7_1: 'lucy',
		value7_2: 'lucy',
		
		value8_1: '',
		items8: ['jack', 'lucy'],
		name8: '',
		
		value9_1: [1, 22],
		
		placement10: 'topLeft',
		value10_1: 'HangZhou',
		
		size11: 'middle',
		value11_1: 'a1',
		value11_2: ['a1', 'b2'],
		value11_3: ['a1', 'b2'],
		
		maxTagCount: 2,
		maxTagTextLength: 10,
		value12_1: ['a1', 'b2'],
		
		value13_1: {value: 'lucy',label: '露西',},
		
		value14_1: 'Zhejiang',
		value14_2: 'Hangzhou',
		provinceData: ['Zhejiang', 'Jiangsu'],
		cityData: {
			Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],
			Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang'],
		},
		
		value15_1: '',
		options15_1: [],
		
		value16_1: [],
		options16_1: [],
		
		value17_1: [],
		arr17: ['Apples', 'Nails', 'Bananas', 'Helicopters'],
		
		value18_1: ['china'],
		options18: [
			{value: 'china',label: 'China (中国)',icon: '🇨🇳',},
			{value: 'usa',label: 'USA (美国)',icon: '🇺🇸',},
			{value: 'japan',label: 'Japan (日本)',icon: '🇯🇵',},
			{value: 'korea',label: 'Korea (韩国)',icon: '🇨🇰',},
		],
		
		value19_1: 'lucy',
		options19: [
			{id: 'jack',name: 'Jack',children: [
					{id: 'small jack',name: 'samll Jack',},
					{id: 'jack2',name: 'Jack二',},
				],
			},
			{id: 'lucy',name: 'Lucy',},
			{id: 'disabled',name: 'Disabled',disabled: true,},
			{id: 'yiminghe',name: 'Yiminghe',},
		],
		
		
		
	}
},
computed: {
	options2_1(){
		let options = [...Array(26)].map((_, i) => ({ value: (i + 10).toString(36) + (i + 1) }));
		return options;
	},
	options12(){
		let options = [...Array(26)].map((_, i) => ({ value: (i + 10).toString(36) + (i + 1), label: (i + 10).toString(36) + (i + 1) + '字母加数字' }));
		return options;
	},
	showData(){
		return function(menuNode, props){
			// console.log("menuNode", menuNode);
			// console.log("props",  props);
			return 'showData'
		}
	},
	options9_1(){
		let ret = [];
		for(let i = 0; i < 10000; i++){
			ret.push({
				value: i, 
				label: `${i}:${i.toString(16)}`, 
				disabled: i == 3,
			});
		}
		return ret;
	},
	
	cities(){
		return this.cityData[this.value14_1];
	},
	
	options17_1(){
		let arr = this.arr17.filter(o => {
			return !this.value17_1.includes(o);
		})
		let option = arr.map(item => {
			return {value: item};
		});
		return option;
	},
	
},
methods:{
	focus1(value){
		console.log('focus1');
	},
	handleChange1(value, option){
		console.log('handleChange1:', value, option);
	},
	
	filterOption6(input, option){
		// console.log(input, option);
		return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
	},
	handleFocus6(){
		console.log('handleFocus6');
	},
	handleBlur6(){
		console.log('handleBlur6');
	},
	
	addItem8(){
		console.log('addItem8');
	},
	
	popupScroll11(){
		console.log('popupScroll11');
	},
	
	handleSearch15(value){
		setTimeout(()=>{
			let options = [...Array(26)].map((_, i) => ({ value: (i + 10).toString(36) + (i + 1), label: (i + 10).toString(36) + (i + 1) + ' => ' + value}));
			this.options15_1 = options;
		}, 1000);
		console.log('handleSearch15', value);
	},
	
	handleSearch16(value){
		setTimeout(()=>{
			let options = [...Array(26)].map((_, i) => ({ value: (i + 10).toString(36) + (i + 1)+value, label: (i + 10).toString(36) + (i + 1) + ' => ' + value}));
			this.options16_1 = options;
		}, 1000);
		console.log('handleSearch16', value);
	},
	
},
watch:{
	value14_1:function(value){
		this.value14_2 = this.cityData[value][0];
	},
},
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(AntdIconsVue)) {app.component(key, component)};
app.use(antd);
let vm = app.mount("#app");


</script>
</html>
